<template>
  <div class="checklist-page">
    <div class="page-header">
      <h2>内容审核</h2>
      <p>管理和审核用户发布的内容</p>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="搜索内容ID/关键词" v-model="searchKey" />
        </el-col>
        <el-col :span="4">
          <el-select placeholder="审核状态" v-model="status">
            <el-option label="全部" value="" />
            <el-option label="待审核" value="pending" />
            <el-option label="已通过" value="passed" />
            <el-option label="已拒绝" value="rejected" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="内容类型" v-model="contentType">
            <el-option label="全部" value="" />
            <el-option label="图文" value="image_text" />
            <el-option label="视频" value="video" />
            <el-option label="短文" value="short" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="dateRange"
          />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="resetFilter">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 内容列表 -->
    <el-card class="content-card" style="margin-top: 20px;">
      <el-table :data="contentList" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="内容标题" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.type === 'image_text'">图文</el-tag>
            <el-tag v-if="scope.row.type === 'video'" type="success">视频</el-tag>
            <el-tag v-if="scope.row.type === 'short'" type="info">短文</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="submitTime" label="提交时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'pending'" type="warning">待审核</el-tag>
            <el-tag v-if="scope.row.status === 'passed'" type="success">已通过</el-tag>
            <el-tag v-if="scope.row.status === 'rejected'" type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="viewDetail(scope.row)">查看</el-button>
            <el-button size="small" type="success" @click="approve(scope.row)" v-if="scope.row.status === 'pending'">通过</el-button>
            <el-button size="small" type="danger" @click="reject(scope.row)" v-if="scope.row.status === 'pending'">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination" style="margin-top: 15px; text-align: right;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 筛选条件
const searchKey = ref('');
const status = ref('');
const contentType = ref('');
const dateRange = ref([]);

// 列表数据
const contentList = ref([
  {
    id: 1001,
    title: "这是一篇测试图文内容",
    type: "image_text",
    author: "test_user1",
    submitTime: "2023-10-15 09:23:45",
    status: "pending"
  },
  {
    id: 1002,
    title: "皮皮虾精选视频",
    type: "video",
    author: "video_creator",
    submitTime: "2023-10-15 10:12:33",
    status: "pending"
  },
  {
    id: 1003,
    title: "每日一句心情短文",
    type: "short",
    author: "short_writer",
    submitTime: "2023-10-14 16:45:12",
    status: "passed"
  }
]);

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(128);

// 搜索方法
const handleSearch = () => {
  // 实际项目中调用接口获取数据
  ElMessage.success("查询成功");
};

// 重置筛选条件
const resetFilter = () => {
  searchKey.value = '';
  status.value = '';
  contentType.value = '';
  dateRange.value = [];
};

// 查看详情
const viewDetail = (row) => {
  ElMessage.info(`查看ID为${row.id}的内容详情`);
  // 实际项目中可打开弹窗或跳转详情页
};

// 审核通过
const approve = (row) => {
  row.status = 'passed';
  ElMessage.success("审核通过");
};

// 审核拒绝
const reject = (row) => {
  row.status = 'rejected';
  ElMessage.success("已拒绝");
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.checklist-page {
  padding: 0 16px;
}

.page-header {
  margin-bottom: 20px;
}

.filter-card {
  padding: 15px 0;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
